<!DOCTYPE HTML>
<html>
	<head>
		<title>微博留言</title>
		<meta charset="utf-8"/>
		<script src="./move.js"></script>
		<style>
		*{
			margin:0;
			padding:0;
		}
		#txt1{
			margin-left:20px;
		}
			#ul1{
				width:400px;
				height:400px;
				border:1px solid #ccc;
				margin:100px auto;
				list-style: none;
				overflow: hidden;
			}
			#ul1 li{
				border-bottom: 1px #ccc dashed;
				padding-top:10px;
				filter: alpha(opacity:0);
				opacity:0;
				overflow:hidden;
			}
		</style>
		<script>
		window.onload=function()
			{
				var oTxt1=document.getElementById('txt1');
				var oUl1=document.getElementById('ul1');
				var oBtn1=document.getElementById('btn1');
			oBtn1.onclick=function(){
				
				var oli=document.createElement('li');
				oli.innerHTML=oTxt1.value;
				oTxt1.value="";
				if(oUl1.children.length==0)
				{
					oUl1.appendChild(oli);
				}
				else
				{
					oUl1.insertBefore(oli,oUl1.children[0]);
				}
				//运动
				var iHeight=oli.offsetHeight;
				oli.style.height='0';
				change(oli,{height:iHeight},function(){
					change(oli,{opacity:100});
				});

			}
		}
		</script>
	</head>
	<body>
		<input type="text" id="txt1"/>
		<input  id="btn1" type="button" value="留言"/>
		<ul id="ul1"></ul>
	</body>
</html>